<template>
    <div>
        <el-form :model="queryData" class="demo-form-inline" inline >
            <div style="display: flex;justify-content: start;">

                <template v-for="(item, index) in searchConfig" :key="index">
                    <el-form-item v-if="item.type == 'input' && !item.isHidden" label="">
                        <el-input v-model="queryData[item.key]" clearable :placeholder="'请输入' + item.dataIndex"
                            v-bind="item.attrs" @keyup.enter.native="search" />
                    </el-form-item>
                    <!-- 下拉框，非priority -->
                    <el-form-item v-if="item.type == 'select' && item.key !== 'priority'" label="">
                        <el-select v-model="queryData[item.key]" clearable placeholder="请选择" v-bind="item.attrs"
                            @change.native="search">
                            <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value" />
                        </el-select>
                    </el-form-item>
                    <!-- 下拉框，且为priority -->
                    <el-form-item v-if="item.type == 'select' && item.key == 'priority'" label="">
                        <el-select v-model="queryData[item.key]" clearable placeholder="请选择" v-bind="item.attrs"
                            @change.native="search">
                            <el-option v-for="i in 10" :key="i" :label="i" :value="i" />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="item.type == 'dataPicker'" label="">

                        <el-date-picker v-model="queryData[item.key]" placeholder="选择日期" type="date" v-bind="item.attrs"
                            value-format="YYYY-MM-DD" @change.native="search" />
                    </el-form-item>

                    <el-form-item v-if="item.type == 'datetimerange'" label="">

                        <el-date-picker v-model="queryData[item.key]" type="datetimerange" start-placeholder="Start Date"
                            end-placeholder="End Date" v-bind="item.attrs" @change.native="search" />

                    </el-form-item>



                    <el-form-item v-if="item.type == 'datetime'" label="">

                        <el-date-picker v-model="queryData[item.key]" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                            @change.native="search" placeholder="选择日期和时间" v-bind="item.attrs" />

                    </el-form-item>
                    <el-form-item v-if="item.type == 'definition'" label="">
                        <slot :name="item.dataIndex"></slot>
                    </el-form-item>

                </template>

                <el-form-item>
                    <el-button icon="el-icon-refresh-right" type="primary" @click="reset">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" @click="search" @keyup.enter.native="search">查询
                    </el-button>
                </el-form-item>

                <template v-for="(item, index) in searchConfig" :key="index">
                    <template v-if="item.scopedSlots && item.type == 'function'">
                        <el-form-item>
                            <slot :name="item.dataIndex"></slot>
                        </el-form-item>
                    </template>
                </template>
            </div>

        </el-form>
    </div>
</template>

<script>
import { defineComponent, ref, toRaw } from 'vue'

export default defineComponent({
    props: ['searchConfig'],
    emits: ['resetFn','searchFn'],
    setup(props, {
        attrs,
        slots,
        emit
    }) {
        const queryData = ref({});
        let newQueryData = ref({});
        const search = () => {
            newQueryData.value = {}
            let queryObj = toRaw(queryData.value);
            
            for (let k in queryObj) {
                try {
                    newQueryData.value[k] = queryObj[k].trim();
                } catch (e) {
                    newQueryData.value[k] = queryObj[k];
                }

            }
            emit('searchFn', newQueryData.value);

        }
        const reset = () => {
            queryData.value = {};
            emit('resetFn', queryData.value);
            // emit('search', newQueryData.value);
        }


        return {
            queryData,
            search,
            reset,

        }
    },
})
</script>

<style scoped>
:deep().el-input--prefix .el-input__inner {
    /*padding-left: 85px;*/
}

:deep().el-drawer__body {
    overflow: auto;
}

.demo-form-inline {}
</style>
<style>
.uploadTemplate .el-upload--text {
    border: none;
    width: 75px;
    height: 30px;
}
</style>
